<!-- file usergroups -->
<script> 
	
	$(function(){	
		/* REMOVE DUPLICATE ID */
		var ids = [];
		$('*').each(function() {
		    if (this.id && this.id !== '') {
		        if (ids[this.id]) {
		            $(this).remove();
		        } else {
		            ids[this.id] = this
		        }
		    }
		});
		/* external function */
		
		$.fn.serializeObject = function()
		{
		   var o = {};
		   var a = this.serializeArray();
		   $.each(a, function() {
			   if (o[this.name]) {
				   if (!o[this.name].push) {
					   o[this.name] = [o[this.name]];
				   }
				   o[this.name].push(this.value || '');
			   } else {
				   o[this.name] = this.value || '';
			   }
		   });
		   return o;
		};
		
		/* declarisasi */
		
		task_usergroups = $("#task_usergroups");
		grid_usergroups = $("#grid-usergroups");
		pgrid_usergroups = $("#pgrid-usergroups");
		btnadd_usergroups = $("#btn-add-usergroups");
		btncancel_usergroups =  $("#btn-cancel-usergroups");
		btnsave_usergroups = $("#btn-save-usergroups");
		btnedit_usergroups = $("#btn-edit-usergroups");
		btndelete_usergroups = $("#btn-delete-usergroups");
		form_usergroups = $("#form-usergroups");
		
		field_group_id = $("#group_id");
		field_group_name = $("#group_name");
		field_group_desc = $("#group_desc");
		
		menus = $(".menus");
		/* method started */
		
		$( "input[type=submit],input[type=button],input[type=reset], button" ).button();
			
		/* make component */
		
		grid_usergroups.jqGrid({ 
			ajaxGridOptions : {type:"POST"},
			serializeGridData : function(postdata) {return postdata; },
			postData : {task : 'LIST'},
            url: 'c_usergroups',
			datatype: "json", 
			colNames:[
				'Nama Group:',
				'Keterangan',
				'group_id',
				'menus'],
			colModel:[
				{ name: 'group_name'  ,index: 'group_name' , search : true},
				{ name: 'group_desc'  ,index: 'group_desc' , search : true},
				{ name: 'group_id'  ,index: 'group_id',key: true, hidden: true , search : false},
				{ name: 'menus'  ,index: 'menus',hidden: true , search : false}
			],
			width: '700',
			height: 'auto',
			rowNum:10, 
			rowList:[10,20,30], 
			pager: '#pgrid-usergroups', 
			sortname: 'group_id', 
			viewrecords: true, 
			sortorder: "desc",
			caption:"" ,
			loadComplete : function(){
				$( "input[type=submit],input[type=button], button" ).button();
			
			
			}
		}); 
		grid_usergroups.jqGrid('navGrid','#pgrid-usergroups',{edit:false,add:false,del:false,search:false});
		grid_usergroups.jqGrid('filterToolbar',{});
		
		form_usergroups.dialog({
			autoOpen: false,
			height: "auto",
			width: "auto",
			modal: true
		});
		
		/* event */
		
		btnedit_usergroups.click(function(){
			id = grid_usergroups.jqGrid("getGridParam","selrow");
			if (id != null){
				task_usergroups.val("UPDATE");
				dataRow = grid_usergroups.getRowData( id);
				field_group_id.val(dataRow.group_id);
				field_group_name.val(dataRow.group_name);
				field_group_desc.val(dataRow.group_desc);
				
				/* set checked menu */
				menus_str = dataRow.menus;
				if (menus_str != null){
					menus_arr = menus_str.split(",");
					for(i=0;i<menus_arr.length;i++){
						$("#menu_checked"+menus_arr[i]).attr("checked","checked");
					}
				}
				form_usergroups.dialog("open");
			}
		});
		
		btndelete_usergroups.click(function(){
			id = grid_usergroups.jqGrid("getGridParam","selrow");
			if (id != null){
				confr = confirm("Apa Anda yakin menghapus data ini?");
				if (confr){
					var data = $(this).data();
					$.ajax({
						type: 'POST',
						url: 'c_usergroups',
						data: {group_id: id, task : 'DELETE'},
						success: function(response){
							if(response==1){
								grid_usergroups.trigger('reloadGrid');
								$("#grid-usergroups").trigger('reloadGrid');
							}
						}
					});
				}
			}
		});
				
		btnadd_usergroups.click(function(){
			task_usergroups.val("INSERT");
			form_usergroups.dialog("open");
		});
		
		btncancel_usergroups.click(function(){
			form_usergroups.dialog("close");
			menus.removeAttr("checked");
		});
		
		btnsave_usergroups.click(function(){
			data = form_usergroups.serializeObject();
			$.ajax({
				url : "c_usergroups",
				data : data,
				type : 'POST'
			}).done(function(response){
				grid_usergroups.trigger('reloadGrid');
				btncancel_usergroups.click();
			});
		});
		
	});
</script>

	<table id="grid-usergroups" class="table table-striped table-bordered" ></table>
	<div id="pgrid-usergroups"></div>
	
	<button id="btn-add-usergroups">Tambah</button>
	<button id="btn-edit-usergroups">Ubah</button>
	<button id="btn-delete-usergroups">Hapus</button>
	
	<form id="form-usergroups" title="usergroups" disabled=true>
		<input type="hidden" value="INSERT" name="task" id="task_usergroups">
	   <table>
			<tr style="display: none">
				<td align="right">group_id:</td>
				<td align="left"><input id="group_id" name="group_id" /></td>
			</tr>
			
			<tr valign=top> <td align="right">Nama Group:</td> <td align="left"><input id="group_name" name="group_name" /></td> </tr>
			<tr valign=top> <td align="right">Keterangan:</td> <td align="left"><input id="group_desc" name="group_desc" /></td> </tr>
			<tr valign=top> <td align="right">Hak Access:</td> <td align="left">
			<?php foreach($s_menus as $menu){
				echo "<input type='checkbox' class='menus' name='menu' id='menu_checked".$menu->menus_id."' value='".$menu->menus_id."'> ".ucfirst(strtolower($menu->menus_label))."<br />";
			} //var_dump($s_menus); ?></td> </tr>
			<tr>
				<td align="right"></td>
				<td style="padding-top: 10px;" align="right">
					<input style="margin-right: 5px;" type="button" id="btn-save-usergroups" value="Save"  />
					<input id="btn-cancel-usergroups" type="reset" value="Cancel" /></td>
			</tr>
		</table>
	</form>